import React from 'react'
import { Badge, TabBar } from "antd-mobile";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import style from './css/index.module.css'
import { useNavigate } from 'react-router-dom';
function Tabr() {
    let nav=useNavigate()
     const tabs = [
       {
         key: "home",
         title: "首页",
         icon: <AppOutline />,
       },
       {
         key: "index",
         title: "出行服务",
         icon: <UnorderedListOutline />,
       },
       {
         key: "order",
         title: "订单",
         icon: (active) => (active ? <MessageFill /> : <MessageOutline />),
       },
       {
         key: "user",
         title: "铁路会员",
         icon: <UserOutline />,
       },
       {
         key: "my",
         title: "我的",
         icon: <UserOutline />,
       },
     ];
  return (
    <div className={style.op}>
      <TabBar onChange={(key)=>nav(key)}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}

export default Tabr
